<!-- 体育管理=>测试科目管理 -->
<template>
  <div class="active-item pad">
    <div class="head">
      <span>体育项目管理</span>
      <el-button
        type="primary"
        circle
        icon="el-icon-plus"
        @click="openAddDialog"
      />
    </div>

    <el-table :data="items" border stripe class="m-t-b" v-loading="tableLoading">
      <el-table-column label="体育项名称" prop="examItemName"></el-table-column>
      <el-table-column label="使用场景">
        <template slot-scope="scope">
          {{scope.row.type == 1 ? '学校' : (scope.row.type == 2 ? '消防' : '无')}}
        </template>
      </el-table-column>
      <el-table-column label="使用对象">
        <template slot-scope="scope">
          {{scope.row.textType == 1 ? '消防员' : (scope.row.textType == 2 ? '干部' : '无')}}
        </template>
      </el-table-column>
      <el-table-column label="单位">
        <template slot-scope="scope">
          {{scope.row.units || '无'}}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createDate"></el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
            active-text="是"
            inactive-text="否"
            v-model="scope.row.enable"
            @change="changeItemStatus($event, scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="default"
            circle
            icon="el-icon-edit"
            @click="openEditDialog(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            circle
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex m-t-b"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="total"
      :current-page.sync="currentPage"
    >
    </el-pagination>

<!--    dialog：对话，点击加号的弹出框-->
    <el-dialog :title="itemDialogTitle" :visible.sync="showItemDialog">
      <el-form :model="item" label-position="top" ref="item" :rules="rules">
        <el-form-item label="体育项名称" prop="examItemName">
          <el-input v-model="item.examItemName" />
        </el-form-item>
        <el-form-item label="使用场景">
          <el-radio-group v-model="item.type">
            <el-radio :label="1">学校</el-radio>
            <el-radio :label="2">消防</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="使用对象">
          <el-radio-group v-model="item.textType">
            <el-radio :label="1">消防员</el-radio>
            <el-radio :label="2">干部</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="item.units" />
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        @click="addSportItem"
        :loading="addLoading"
      >保存</el-button>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSportItemByPage,
  createSportItem,
  updateSportItem,
  updateSportItemStatus,
  deleteSubject
} from '../api/version2';
import { formatDate } from '../util';
export default {
  name: 'ActiveItem',
  data () {
    return {
      item: {
        examItemName: '',
        type: 2, // 1 : 学校 2: 消防
        addRecord: null,
        units: '',
        textType: 1, // 1: 消防员 2: 干部
      },
      currentPage: 1,
      addLoading: false,
      showItemDialog: false,
      itemDialogTitle: '添加体育项',
      searchText: '',
      searchLoading: false,
      tableLoading: false,
      pageSize: 10,
      items: [],
      total: 0,
      itemId: '',
      rules: {
        examItemName: [
          { required: true, message: '体育项名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    openAddDialog () { // 打开添加弹出框
      this.itemDialogTitle = '添加体育项';
      this.item.examItemName = '';
      this.item.units = '';
      this.item.type = 2;
      this.item.textType = 1;
      this.showItemDialog = true
    },
    openEditDialog (row) { // 打开修改弹出框
      this.itemId = row.id;
      this.item.examItemName = row.examItemName;
      this.item.units = row.units;
      this.item.type = Number(row.type);
      this.itemDialogTitle = '修改体育项';
      this.item.textType = row.textType || 1;
      this.showItemDialog = true
    },
    handleDelete (row) { // 删除测试项
      this.$confirm(`确定删除该测试项吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(r => {
        deleteSubject(row.id)
        .then(res => {
          this.$message.success('删除成功');
          this.fetchSportItems(1)
        })
        .catch(e => {

        })
      })
      .catch(err => {

      })
    },
    addSportItem () { // 保存体育项
      this.$refs.item.validate(valid => {
        if (valid) {
          this.addLoading = true;
          if (this.itemDialogTitle === '添加体育项') {
            createSportItem(this.item)
            .then(res => {
              this.fetchSportItems(1);
              this.$message.success('添加成功');
              this.addLoading = false;
              this.showItemDialog = false
            })
            .catch(e => {
              this.addLoading = false
            })
          } else {
            updateSportItem({
              id: this.itemId,
              ...this.item
            })
            .then(res => {
              this.fetchSportItems(this.currentPage);
              this.$message.success('修改成功');
              this.addLoading = false;
              this.showItemDialog = false
            })
            .catch(e => {
              this.addLoading = false
            })
          }
        } else {
          return false
        }
      })
    },
    changeItemStatus (e, row) { // 改变启用/禁用
      this.$confirm(`确定 ${e ? '启用' : '禁用'} 体育项${row.examItemName}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(r => {
        updateSportItemStatus(row.id, Number(e))
        .then(res => {
          this.fetchSportItems(1);
          this.$message.success('操作成功')
        })
        .catch(e => {})
      })
      .catch(err => {
        row.enable = !e
      })
    },
    handlePagi (page) { // 分页事件
      this.currentPage = page;
      this.fetchSportItems(page)
    },
    fetchSportItems (index) { // 分页查询体育项
      this.tableLoading = true;
      getSportItemByPage({
        index,
        conut: this.pageSize,
        queryParam: {
          examItemName: this.searchText || null
        }
      })
      .then(res => {
        this.tableLoading = false;
        let list = res.data.data.list || [];
        list.forEach(item => {
          item.enable = Boolean(item.testItemStatus);
          item.createDate = formatDate(item.createDate, 'zh:')
        });
        console.log(list)
        this.items = list;
        this.total = res.data.data.totalRecord
      })
      .catch(e => {
        this.tableLoading = false
      })
    }
  },
  created () {
    this.fetchSportItems(1)
  }
}
</script>
<style lang="scss">

</style>
